<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Online IDE</title>

    <link type="text/css" href="css/scrollbar.css"/>

    <script type="text/javascript" src="js/jquery-1.7.2.js"><!--//--></script>
    <script type="text/javascript" src="js/jquery-ui-min.js"><!--//--></script>
    <script type="text/javascript" src="js/old/jq-mouseWhile.js"><!--//--></script>
    <script type="text/javascript" src="js/main.js"><!--//--></script>

    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        p {
            -webkit-margin-before: 0.5em;
            -webkit-margin-after: 0.5em;
        }

        #mainMenu {
            position: fixed;
            width: 100%;
            height: 30px;
            background-color: #d3d3d3;
            border-bottom: 1px solid gray;
        }

        .ideBody {
            border: 1px solid gray;
            position: relative;
            top: 30px;
        }

        #codeWrapper {
            height: 200px;
            overflow: hidden;
            width: 500px;
            border-right: 1px solid gray;
        }

        #codeArea {
            height: 200px;
            overflow: auto;
            width: 100%;
            margin-right: 16px;
            /*padding: 5px;*/
        }

        .content {
            width: 250px;
            height: 250px;
            overflow: auto;
        }
    </style>
</head>
<body>

<div id="mainMenu" class="menu">
    <!---->
</div>

<div class="ideBody">
    <div id="codeWrapper" style="display: none;">
        <div id="codeArea" contenteditable="true">
            <p>1 Hello World</p>
            <p>2 Hello World</p>
            <p>3 Hello World</p>
            <p>4 Hello World</p>
            <p>5 Hello World</p>
            <p>5 Hello World</p>
            <p>6 Hello World</p>
            <p>7 Hello World</p>
            <p>8 Hello World</p>
            <p>9 Hello World</p>
            <p>10 Hello World</p>
        </div>
    </div>

    <div class="content" contenteditable="true">
        <p>1 Hello World</p>
        <p>2 Hello World</p>
        <p>3 Hello World</p>
        <p>4 Hello World</p>
        <p>5 Hello World</p>
        <p>5 Hello World</p>
        <p>6 Hello World</p>
        <p>7 Hello World</p>
        <p>8 Hello World</p>
        <p>9 Hello World</p>
        <p>10 Hello World</p>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        // using the event helper
        $('.content').mousewheel(function(event, delta) {
            console.log(delta);
        });
    });
</script>

</body>
</html>